<template>
  <div class="side-nav">
    <el-menu>
      <el-menu-item
        v-for="v in menuList"
        :key="v.id"
        @click.native="handleClick(v)"
        :class="{ active: v.id == idx }"
      >
        <span>{{ v.name }}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>
<script>
export default {
  data() {
    return {
      idx: '1',
      libraryEnName: '',
      menuList: [
        { id: 1, route: 'info', name: '元素库信息' },
        { id: 2, route: 'chapter', name: '资源管理' },
        { id: 3, route: 'team', name: '教师团队' },
        { id: 4, route: 'strategy', name: '批注管理' },
        { id: 5, route: 'review', name: '评论管理' },
        // { id: 6, route: 'data', name: '数据统计' },
        // { id: 7, route: 'update', name: '更新管理' },
        { id: 8, route: 'other', name: '审核流程' },
      ],
    }
  },
  watch: {
    $route() {
      this.setIdx()
    },
  },
  mounted() {
    this.setIdx()
    this.libraryEnName = this.$store.getters.libraryEnName
  },
  methods: {
    handleClick(data) {
      this.idx = data.id
      let name = this.libraryEnName + '-' + data.route
      this.$router.push({ name })
    },
    setIdx() {
      let courseCreateId = this.$store.getters.curCourse.createBy
      let userId = this.$store.getters.userId
      let userType = this.$store.getters.userType
      if (courseCreateId != userId && userType > 10) {
        this.menuList = [
          { id: 1, route: 'info', name: '元素库信息' },
          { id: 2, route: 'chapter', name: '资源管理' },
          { id: 8, route: 'other', name: '审核流程' },
        ]
      } else {
        this.menuList.forEach((v) => {
          if (location.href.includes(v.route)) {
            this.idx = v.id
          }
        })
      }
    },
  },
}
</script>
<style scoped>
.side-nav {
  height: 800px;
}
.side-nav >>> .el-menu {
  border-right: 0 none;
}
.side-nav .el-menu-item {
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #ededed;
}
.side-nav .el-menu-item.active {
  color: var(--colorA1);
  background-color: var(--colorHover1);
}
</style>